<script setup>
  import { ref, watch } from "vue";
  import { Tabbar, TabbarItem,Icon } from "vant";
  import { useRoute } from "vue-router";
  const route = useRoute();
  
  const isShowNav = ref(true);
  
  watch(route, (v) => {
    if (v.meta.hideNav) {
      isShowNav.value = false;
    } else {
      isShowNav.value = true;
    }
  });
  </script>
<template>
  <tabbar class="tabbar"  v-show="isShowNav" route active-color="#FE5A73">
    <tabbar-item icon="home-o" :to="{ name: 'Home' }">首页</tabbar-item>
    <tabbar-item icon="like-o" :to="{ name: 'Collection' }">收藏</tabbar-item>
    <tabbar-item icon="search" :to="{ name: 'Find' }">发现</tabbar-item>
    <tabbar-item icon="chat-o" :to="{ name: 'Message' }">消息</tabbar-item>
    <tabbar-item icon="user-o" :to="{ name: 'User' }">我的</tabbar-item>
  </tabbar>
</template>
<style scoped>
.tabbar{
  height: 8%;
}
/* .tabbar-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.icon{
  display: block;
font-size: 1.8rem;
} */
</style>